import Taro from '@tarojs/taro';
import {Image,Input,Picker,Button} from '@tarojs/components';

import NavBar from '../../component/navbar';
import Styles from './index.module.less';
import { useEffect, useState } from 'react';
import {getGlobalData, Request} from '../../util';
import { Style } from '@tarojs/runtime';

export default function index(props) {
    const navBarHeight = Taro.getStorageSync("navBarHeight");
    const domain = getGlobalData('domain');
    const genderRange = ['未知','男','女'];
    const openid = Taro.getStorageSync('openid');
    const [gender, setGender] = useState("未知");
    const [trueName, setTrueName] = useState("");
    const [avatarUrl, setAvatarUrl] = useState("");

    const handleChooseAvatar = (e) => {
        Taro.uploadFile({
            url: domain +"/client/image/uploadAvatarToQiNiu",
            filePath:e.detail.avatarUrl,
            name: 'image',
            formData: {
                'openid': openid
            },
            success:function(res){
                console.log(res);
            }
        })
        
        setAvatarUrl(e.detail.avatarUrl);
    }

    const handleGenderChange = (e) => {
        let index = e.detail.value;

        Request(domain+"/client/user/updateGender",{openid:openid, gender:index})

        setGender(genderRange[index]);
    }

    

    const handleTrueNameInput = (e) => {

        Request(domain+"/client/user/updateTrueName",{openid:openid, trueName: e.detail.value}).then((res)=>{
            setTrueName(trueName);
        })
    }



    useEffect(()=>{
        Request(domain+"/client/user/userInfo",{openid:openid}).then((res)=>{

            let {avatarUrl,gender,true_name,phone} = res.data.data;



            setTrueName(true_name);

            if(!gender){
                setGender("未知")
            }else if(gender == 1){
                setGender("男")
            }else if(gender == 2){
                setGender("女")
            }
            
            if(!avatarUrl){
                setAvatarUrl("http://cdn.henrywong01.top/center/default.jpeg")
            }else{
                setAvatarUrl(avatarUrl)
            }

        })
    },[])

    return (
        <view>
            <NavBar title="个人信息" backTo="prev"/>
            <view class={Styles.avatar} style={{marginTop:navBarHeight}}>
            
                <Image class={Styles.img}  src={avatarUrl}></Image>
            </view>

            <view class={Styles.cell}>
                <view class={Styles.container}>
                    <view class={Styles.left}>头像：</view>
                    <Button className={Styles.btn} openType="chooseAvatar" onChooseAvatar={handleChooseAvatar}>更换头像</Button>
                </view>
            </view>

            <view class={Styles.cell}>
                <view class={Styles.container}>
                    <view class={Styles.left}>姓名：</view>
                    <Input value={trueName} onInput={handleTrueNameInput} class={Styles.input}/>
                </view>
               
            </view>

      

            <view class={Styles.cell}>
                <view class={Styles.container}>
                    <view class={Styles.left}>开放ID：</view>
                    <Input disabled={true} type="nickname" placeholder={openid}  class={Styles.input}/>
                </view>
            </view>

            <view class={Styles.cell}>
                <view class={Styles.container}>
                    <view class={Styles.left}>性别：</view>
                    <Picker mode="selector" class={Styles.picker} onChange={handleGenderChange}  range={genderRange}>
                       <view class={Styles.val}>{gender}</view>
                        
                    </Picker>
                    
                </view>
            </view>

        </view>
    )
}